'use client'

import { useState, useEffect } from "react"
import { usePathname } from "next/navigation"
import Link from "next/link"
import { 
  Home, 
  ClipboardList, 
  BookOpen, 
  MessageCircle, 
  User,
  Sparkles,
  Star
} from "lucide-react"
import { cn } from "@/lib/utils"

const tabs = [
  {
    name: "首页",
    href: "/",
    icon: Home,
    emoji: "🏠",
    activeColor: "text-vibrant-blue",
    activeBg: "bg-vibrant-blue/10"
  },
  {
    name: "项目方向",
    href: "/courses",
    icon: BookOpen,
    emoji: "📚",
    activeColor: "text-vibrant-green",
    activeBg: "bg-vibrant-green/10"
  },
  {
    name: "画像",
    href: "/personal-profile",
    icon: User,
    emoji: "👤",
    activeColor: "text-vibrant-pink",
    activeBg: "bg-vibrant-pink/10"
  },
  {
    name: "星途推荐",
    href: "/recommendation",
    icon: Star,
    emoji: "🌟",
    activeColor: "text-vibrant-orange",
    activeBg: "bg-vibrant-orange/10"
  },

]

export function MobileNav() {
  const pathname = usePathname()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-lg border-t border-gray-200/50 safe-area-pb md:hidden">
      {/* 顶部装饰线 */}
      <div className="absolute top-0 left-0 right-0 h-0.5 bg-gradient-rainbow"></div>
      
      <nav className="flex items-center justify-around px-2 py-2">
        {tabs.map((tab) => {
          const isActive = pathname === tab.href || 
            (tab.href !== "/" && pathname?.startsWith(tab.href))
          
          return (
            <Link
              key={tab.name}
              href={tab.href}
              className={cn(
                "flex flex-col items-center justify-center min-h-[60px] px-3 py-2 rounded-xl transition-all duration-300 relative group",
                "hover:scale-105 active:scale-95",
                isActive 
                  ? `${tab.activeBg} ${tab.activeColor}` 
                  : "text-gray-500 hover:text-gray-700 hover:bg-gray-50"
              )}
            >
              {/* 活跃状态的背景动画 */}
              {isActive && (
                <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-white/50 to-transparent animate-pulse-slow"></div>
              )}
              
              {/* 图标容器 */}
              <div className="relative z-10 flex flex-col items-center">
                {/* Emoji 和图标 */}
                <div className="relative mb-1">
                  {isActive ? (
                    <div className="text-lg animate-bounce-soft">
                      {tab.emoji}
                    </div>
                  ) : (
                    <tab.icon className="w-6 h-6 transition-transform duration-300 group-hover:scale-110" />
                  )}
                  
                  {/* 活跃状态的闪光效果 */}
                  {isActive && (
                    <Sparkles className="absolute -top-1 -right-1 w-3 h-3 text-vibrant-yellow animate-pulse" />
                  )}
                </div>
                
                {/* 标签文字 */}
                <span className={cn(
                  "text-xs font-medium transition-all duration-300",
                  isActive ? "font-semibold" : "font-normal"
                )}>
                  {tab.name}
                </span>
                
                {/* 活跃状态的指示点 */}
                {isActive && (
                  <div className="absolute -bottom-1 w-1 h-1 bg-current rounded-full animate-pulse"></div>
                )}
              </div>
              
              {/* 悬停时的光晕效果 */}
              <div className="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
            </Link>
          )
        })}
      </nav>
      
      {/* 底部安全区域指示器 */}
      <div className="h-1 bg-gradient-to-r from-transparent via-gray-200/30 to-transparent"></div>
    </div>
  )
} 